<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报表模板配置</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
</head>
<body>
<section id="app" class="content" style="">
    <div class="box box-default color-palette-box">
        <div class="box-header with-border">
            <h3 class="box-title"><i class="fa fa-tag"></i> 报表模块配置页面</h3>
        </div>
        <div class="box-body " >
            <div style="width: 45%;float:left;">
                <div class="box-body no-padding ">
                    <ul id="ulTemplate" class="ztree"></ul>
                </div>
            </div>
            <div style="width: 9%;float:left;"><i class="fa fa-fw fa-arrow-circle-right" style="font-size: 30px;
    margin-top: 50px;"></i></div>
            <div style="width: 45%;float:left;">
                <div class="box-body no-padding ">
                    <ul id="ulModule" class="ztree"></ul>
                    <table class="table-detail">
                        <tr>
                            <td class="td-title">模块名称</td>
                            <td><input type="text" v-model="module.name"/></td>
                            <td rowspan="4"><input type="button" id="reply" value="修改" class="btn oaBtn btn-sm" @click="updateModule"></td>
                        </tr>
                        <tr>
                            <td class="td-title">英文名称</td>
                            <td><input type="text" v-model="module.eName"/></td>
                        </tr>
                        <tr>
                            <td class="td-title">appUrl</td>
                            <td><input type="text" v-model="module.appUrl"/></td>
                        </tr>
                        <tr>
                            <td class="td-title">APP今日报表</td>
                            <td><input type="text" v-model="module.appTodayReport"/></td>
                        </tr>
                    </table>
                </div>

            </div>
            <div class="text-center" style="border-top:2px solid #ddd;margin-top: 20px;float:left;width: 100%"> <input type="button" value="保存配置" class="btn btn-primary" style="margin-top:20px;" @click="save"></div>

            <!-- /.row -->
        </div>
        <!-- /.box-body -->
    </div>

</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>

<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>

<script type="text/javascript">
    var zTreeTemplate = null;
    var zTreeModule = null;
    var zTreeTemplate_callback = {
        showIcon: function (treeId, treeNode) {
            return treeNode.isParent;
        },
        showRemoveBtn: function (treeId, treeNode) {
            return treeNode.type != "root";
        },
        showRenameBtn: function (treeId, treeNode) {
            console.log(treeNode.type)
            return treeNode.type != "root";
        },
        addHoverDom: function (treeId, treeNode) {
            if(treeNode.type != "root"){return false;}
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='添加' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                $.wyui.postMethod(urlConfig.report.config.template.save, {
                    id: '',
                    name: '新建模板',
                    defaultFlag: 0
                }, function (data) {
                    console.log(data);
                    var newNode = zTreeTemplate.addNodes(treeNode, {
                        id: data.id,
                        name: '新建模板',
                        defaultFlag: 0,
                        pId: "0",
                        type: "template"
                    }, true)[0];
                });
                return false;
            });
        },
        removeHoverDom: function (treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        },
        onClick: function (event, treeId, treeNode) {
            zTreeModule.checkAllNodes(false);
            if (treeNode.type == "template") {
                $.wyui.postMethod(urlConfig.report.config.template2Module.getByTemplateId, {
                    templateId: treeNode.id
                }, function (list) {
                    for (var i = 0; i < list.length; i++) {
                        zTreeModule.checkNode(zTreeModule.getNodeByParam("id", list[i].moduleId), true, false, false);
                    }
                });
                app.templateId = treeNode.id;
            }
        },
        beforeDrag: function (treeId, treeNodes) {
            return false;
        },
        beforeEditName: function (treeId, treeNode) {
            zTreeTemplate.editName(treeNode);
            return false;
        },
        beforeRemove: function (treeId, treeNode) {
            if (confirm("确认删除吗？")) {
                $.wyui.postMethod(urlConfig.report.config.template.removeById, {id: treeNode.id}, function (data) {
                    console.log(data);
                    zTreeTemplate.removeNode(treeNode);
                });
            }
            return false;
        },
        beforeRename: function (treeId, treeNode, newName, isCancel) {
            if(treeNode.name!=newName){
                $.wyui.postMethod(urlConfig.report.config.template.save, {
                    id: treeNode.id,
                    name:newName
                }, function (data) {
                    return true;

                });
            }

        }
    };
    var zTreeTemplate_setting = {
        view: {
            addHoverDom: zTreeTemplate_callback.addHoverDom,
            removeHoverDom: zTreeTemplate_callback.removeHoverDom,
            showIcon: zTreeTemplate_callback.showIcon
        },
        check: {
            enable: true,
            chkStyle: "radio",
            level: "all"
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: zTreeTemplate_callback.onClick,
            beforeDrag: zTreeTemplate_callback.beforeDrag,
            beforeEditName: zTreeTemplate_callback.beforeEditName,
            beforeRemove: zTreeTemplate_callback.beforeRemove,
            beforeRename: zTreeTemplate_callback.beforeRename
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            removeTitle: '删除',
            renameTitle: '修改',
            showRemoveBtn: zTreeTemplate_callback.showRemoveBtn,
            showRenameBtn: zTreeTemplate_callback.showRenameBtn
        }
    };

    var zTreeModule_callback = {
        showIcon: function (treeId, treeNode) {
            return treeNode.type == "root";
        },
        showRemoveBtn: function (treeId, treeNode) {
            return treeNode.type != "root";
        },
        showRenameBtn: function (treeId, treeNode) {
            return treeNode.type != "root";
        },
        addHoverDom: function (treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='添加' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                $.wyui.postMethod(urlConfig.report.config.module.save, {
                    id: '',
                    name: '新建模块',
                    eName: '',
                    appUrl:'',
                    appTodayReport:'0'
                }, function (data) {
                    var newNode = zTreeModule.addNodes(treeNode, {
                        id: data.id,
                        name: '新建模块',
                        eName: '',
                        pId: "0",
                        type: "module",
                        appTodayReport:'0'
                    }, true)[0];
                });
                return false;
            });
        },
        removeHoverDom: function (treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        },
        onClick: function (event, treeId, treeNode) {
            if (treeNode.type == "module") {
                console.log(treeNode)
                app.module = treeNode;
            }
        },
        beforeDrag: function (treeId, treeNodes) {
            return false;
        },
        beforeEditName: function (treeId, treeNode) {
          alert("111");
        },
        beforeRemove: function (treeId, treeNode) {
            if (confirm("确认删除吗？")) {
                $.wyui.postMethod(urlConfig.report.config.module.removeById, {id: treeNode.id}, function (data) {
                    zTreeModule.removeNode(treeNode);
                });
            }
            return false;
        },
        beforeRename: function (treeId, treeNode, newName, isCancel) {
            return false;
        }
    };
    var zTreeModule_setting = {
        view: {
            addHoverDom: zTreeModule_callback.addHoverDom,
            removeHoverDom: zTreeModule_callback.removeHoverDom,
            showIcon: zTreeModule_callback.showIcon
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: zTreeModule_callback.onClick,
            beforeDrag: zTreeModule_callback.beforeDrag,
            beforeEditName: zTreeModule_callback.beforeEditName,
            beforeRemove: zTreeModule_callback.beforeRemove,
            beforeRename: zTreeModule_callback.beforeRename
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            removeTitle: '删除',
            renameTitle: '修改',
            showRemoveBtn: zTreeModule_callback.showRemoveBtn,
            showRenameBtn: zTreeModule_callback.showRenameBtn
        }
    };
    $(function () {
        $.wyui.postMethod(urlConfig.report.config.template.getTreeNodes, {}, function (nodes) {
            zTreeTemplate = $.fn.zTree.init($("#ulTemplate"), zTreeTemplate_setting, nodes);
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].defaultFlag == 1) {
                    zTreeTemplate.checkNode(zTreeTemplate.getNodeByParam("id", nodes[i].id), true);
                }
            }
        });
        $.wyui.postMethod(urlConfig.report.config.module.getTreeNodes, {}, function (nodes) {
            zTreeModule = $.fn.zTree.init($("#ulModule"), zTreeModule_setting, nodes);
        });
    });
    var app = new Vue({
        el: '#app',
        data: {
            module: {},
            templateId: '',
            moduleIds: '',
        },
        methods: {
            updateModule:function () {
                var that=this;
                $.wyui.postMethod(urlConfig.report.config.module.save, {
                    id: that.module.id,
                    name: that.module.name,
                    eName: that.module.eName,
                    appUrl:that.module.appUrl,
                    appTodayReport:that.module.appTodayReport
                }, function (data) {
                    alert('修改模块成功');
                    var node = zTreeModule.getSelectedNodes()[0];
                    node.name = that.module.name;
                    node.eName = that.module.eName;
                    node.appTodayReport = that.module.appTodayReport;
                    zTreeModule.updateNode(node, false);
                });
            },
            save: function () {
                var that = this;
                var zTreeModuleCheckNodes = zTreeModule.getCheckedNodes();
                var arrModuleIds = new Array();
                for (var i = 0; i < zTreeModuleCheckNodes.length; i++) {
                    if (zTreeModuleCheckNodes[i].id != "0") {
                        arrModuleIds.push(zTreeModuleCheckNodes[i].id)
                    }
                }
                $.wyui.postMethod(urlConfig.report.config.template2Module.config, {
                    templateId: app.templateId,
                    moduleIds: arrModuleIds.join(',')
                }, function () {
                    alert('保存成功');
                });
            }
        }
    });
</script>
</body>
</html>